<template>
    <div>
        <el-drawer :title="title" visible @close="$emit('close');$emit('load')" size="1200px" :wrapperClosable="false">
            <div class="add-main box" v-loading="loading">
                <el-steps :active="active" finish-status="success">
                    <el-step title="选择商品分类"></el-step>
                    <el-step title="填写商品信息"></el-step>
                    <el-step title="填写商品属性"></el-step>
                    <el-step title="选择商品关联"></el-step>
                </el-steps>
                <selectClassify v-if="active==0" @next="next" />
                <goodsInfo v-if="active==1" @prev="prev" @next="next" />
                <attribute v-if="active==2" :handleShow="handleShow" @prev="prev" @next="next" />
                <relation v-if="active==3" @prev="prev" @next="next" />
            </div>
        </el-drawer>
    </div>
</template>
<script>
import selectClassify from "./detail/selectClassify.vue"
import goodsInfo from "./detail/goodsInfo.vue"
import attribute from "./detail/attribute.vue"
import relation from "./detail/relation.vue"
export default {
    name: '',
    props: {
        title: String,
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        customerId: String,
    },
    components: {
        selectClassify,
        goodsInfo,
        attribute,
        relation
    },
    data() {
        return {
            loading: false,
            // active: 0,
            active: 3,
        }
    },
    created() {

    },
    methods: {
        prev() {
            this.active--
        },
        next() {
            this.active++
            console.log(this.active, 789999)
        }
    },
}

</script>
<style scoped lang='scss'>
.el-steps {
    width: 80%;
    margin: 0 auto;
    /deep/.el-step__main {
        .el-step__title {
            // text-align: center;
            text-indent: -2.2em;
        }
    }
}
/deep/.boxin {
    display: flex;
    width: 100%;
    border: 1px solid rgba(228, 228, 228, 1);
    margin-top: 20px;

    .boxl {
        width: 180px;
        border-right: 1px solid rgba(228, 228, 228, 1);
        padding: 20px 0 0;
        position: relative;
        .txt {
            position: absolute;
            left: 0;
            .title {
                width: 180px;
                height: 50px;
                color: #ffffff;
                background: #1abc9c;
                line-height: 50px;
                text-align: center;
                position: relative;
                &::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 0;
                    border-left: 25px solid #1abc9c;
                    border-top: 25px solid transparent;
                    border-bottom: 25px solid transparent;
                    right: -25px;
                }
            }
        }
        .txt1 {
            top: 20px;
        }
        .txt2 {
            top: 420px;
        }
        .txt3 {
            top: 890px;
        }
        .txt4 {
            top: 1790px;
        }
        .txt5 {
            top: 200px;
        }
    }
    .boxr {
        flex: 1;
        margin-top: 30px;
        .button {
            border-top: 1px solid rgba(228, 228, 228, 1);
            width: 90%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            padding: 40px 0;
        }
    }
    .text-muted {
        white-space: nowrap;
    }
    .tablist {
        width: 62%;
        margin-left: 124px;
        margin-top: -10px;
        margin-bottom: 10px;
    }
}
</style>